<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8">
    <title>Title</title>
</head>
<style>
    .hide{
        display: none;
    }
    .menu{
        height: 500px;
        width: 200px;
        border: 1px solid black;
    }
    .item{
        width: 200px;
        color: white;
        background-color: #2459a2;
    }
    .conten{
    }
</style>

<body>
<div class="menu">
    <div class="item"><h3>常用工具</h3>
        <div class="conten">
            <div><a href="#">菜单一</a></div>
            <div><a href="#">菜单二</a></div>
            <div><a href="#">菜单三</a></div>
            <div><a href="#">菜单四</a></div>
        </div>
    </div>
    <div class="item">操作系统
        <div class="conten hide">
            <div><a href="#">菜单一</a></div>
            <div><a href="#">菜单二</a></div>
            <div><a href="#">菜单三</a></div>
            <div><a href="#">菜单四</a></div>
        </div>
    </div>
    <div class="item">系统镜像
        <div class="conten hide">
            <div><a href="#">菜单一</a></div>
            <div><a href="#">菜单二</a></div>
            <div><a href="#">菜单三</a></div>
            <div><a href="#">菜单四</a></div>
        </div>
    </div>

</div>


<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>

<script>
    $('.item').click(function () {   //类上绑定事件
        $(this).children().removeClass('hide').parent().siblings().find('.conten').addClass('hide'); //查找，筛选，操作标签
    })
</script>


</body>
</html>